<template>
	<view class="detail-box" v-for="(item,index) in goodData" :key="index">
		<image :src="baseUrl+'/'+item.goodsImage" mode="aspectFill"></image>
		<view class="goods-info">
			<view class="content">
				<view class="content-head">
					<view class="goods-name">{{item.goodsName}}</view>
					<view class="goods-num">商品库存:{{item.goodsNum}}件</view>
				</view>
				<view class="goods-intro">{{item.goodsIntro}}</view>
				<view class="goods-price">￥{{item.goodsSellingPrice}}</view>
			</view>
			<view>用户评价({{goodsCommentData.length}})</view>
			<view v-if="goodsCommentData.length==0" class="goods-comment">暂无用户评价</view>
			<view v-else class="goods-comment" v-for="(c,i) in wxUserComment" :key="i">
				<view class="comment-content">
					<image :src="c.avatar_url"></image>
					<view class="nameRate">
						<view class="nickName">{{c.nick_name}}</view>
						<uni-rate margin="2px" v-model="c.score" disabled="true" size="15" disabledColor="#ffca3e" />
					</view>
					<view class="comment-time">{{c.create_time}}</view>
				</view>
				<view>{{c.content}}</view>
			</view>
			<view v-show="webUserComment.length!=0" class="goods-comment" v-for="(c,i) in webUserComment" :key="i">
				<view class="comment-content">
					<image :src="baseUrl+'/'+c.profile"></image>
					<view class="nameRate">
						<view class="nickName">{{c.username}}</view>
						<uni-rate margin="2px" v-model="c.score" disabled="true" size="15" disabledColor="#ffca3e" />
					</view>
					<view class="comment-time">{{c.create_time}}</view>
				</view>
				<view>{{c.content}}</view>
			</view>
		</view>
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="computedButtonGroup" @click="onClickGoodsNav"
				@buttonClick="buttonClickGoodsNav" />
		</view>
		<up-popup :show="show" @close="close" @open="open" :closeable="true">
			<view class="pop-content">
				<view class="content-goods">
					<image :src="baseUrl+'/'+item.goodsImage"></image>
					<view class="content-goods-info">
						<view class="info-name">{{item.goodsName}}</view>
						<view class="info-price">￥{{item.goodsSellingPrice}}</view>
					</view>
				</view>
				<view class="content-address">
					<view>收货地址</view>
					<view class="address" @click="selectAddress">
						<uni-icons size="14" type="location" />
						<view v-if="userAddressInfo.AddressList.length!=0&&selectAddressData.length==0"
							class="address-info">
							{{userAddressInfo.AddressList[0].name}}&emsp;
							{{userAddressInfo.AddressList[0].phone}}&emsp;
							{{userAddressInfo.AddressList[0].city}}
							{{userAddressInfo.AddressList[0].address}}
						</view>
						<view v-else class="address-info">
							{{ selectAddressData[0] && selectAddressData[0].name ? selectAddressData[0].name : '' }}&emsp;
							{{ selectAddressData[0] && selectAddressData[0].phone ? selectAddressData[0].phone : '' }}&emsp;
							{{ selectAddressData[0] && selectAddressData[0].city ? selectAddressData[0].city : '' }}
							{{ selectAddressData[0] && selectAddressData[0].address ? selectAddressData[0].address : '' }}
						</view>
						<view v-show="!selectAddressData&&userAddressInfo.AddressList.length==0" class="address-info">
							暂无选择地址
						</view>
						<uni-icons size="14" type="right" />
					</view>
				</view>
				<view class="content-quantity">
					<view>购买数量</view>
					<uniNumberBoxVue v-model="buyQuantity" :min="1" :max="item.goodsNum"></uniNumberBoxVue>
				</view>
				<button class="confirm" @click="confirm">确定</button>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import uniNumberBoxVue from '@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue';
	import uniRate from '@/uni_modules/uni-rate/components/uni-rate/uni-rate';
	import {
		ref,
		computed
	} from 'vue';
	import {
		get,
		post,
		baseUrl
	} from '/hooks/req.js'
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app"
	import {
		useUserStore,
		useCart,
		useUserAddressStore,
	} from '@/store/index';
	let useUserInfo = useUserStore()
	let userAddressInfo = useUserAddressStore()
	const userCart = useCart()
	//获取购物车商品数量
	const cartNum = ref(0)
	const buyQuantity = ref(1)
	const show = ref(false)
	const showLogin = () => {
		show.value = true
	}
	const open = () => {
		show.value = true
	}
	const close = () => {
		show.value = false
	}
	const options = ref([{
		icon: 'home',
		text: '主页'
	}, {
		icon: 'cart',
		text: '购物车',
		info: cartNum
	}])
	const buttonGroup = ref([{
			text: '加入购物车',
			backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
			color: '#fff'
		},
		{
			text: '立即购买',
			backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
			color: '#fff'
		}
	])
	const buttonGroup2 = ref([{
		text: '暂时缺货',
		backgroundColor: 'linear-gradient(90deg, #ffb88a, #FDA484)',
		color: '#FBF5E8'
	}])
	//商品Id
	const goodsId = ref()
	//商品数据
	const goodData = ref([])
	const goodsNum = ref()
	//商品评论数据
	const goodsCommentData = ref([])
	//获取商品数据
	const loadGoods = () => {
		get(`/goods/getGoods/` + goodsId.value).then(result => {
			goodData.value = result.data.data;
			goodsNum.value = goodData.value[0].goodsNum
		})
	}
	const computedButtonGroup = computed(() => {
		// 根据商品库存数量动态返回buttonGroup或buttonGroup2
		if (useUserInfo.userInfo.id) {
			return goodsNum.value > 0 ? buttonGroup.value : buttonGroup2.value;
		} else {
			return buttonGroup.value
		}

	});
	//选择的地址
	const selectAddressData = ref([])
	const selectAddress = () => {
		uni.navigateTo({
			url: '/pages/userAddress/userAddress?select=选择'
		})
		uni.$once('selectAddressData', function(data) {
			selectAddressData.value = [JSON.parse(data)]
		})
	}
	//底部导航栏点击方法
	const onClickGoodsNav = (e) => {
		if (e.index == 0) {
			uni.switchTab({
				url: '/pages/home/home',

			})
		} else {
			uni.switchTab({
				url: '/pages/cart/cart',
			})
		}
	}

	const confirm = () => {
		const values = []
		values.push({
			"userId": useUserInfo.userInfo.id,
			"goodsId": goodsId.value,
			"goodsData": goodData.value,
			"quantity": buyQuantity.value,
			"name": selectAddressData.value.length == 0 ? userAddressInfo.AddressList[0].name :
				selectAddressData.value[0].name,
			"phone": selectAddressData.value.length == 0 ? userAddressInfo.AddressList[0].phone :
				selectAddressData.value[0].phone,
			"city": selectAddressData.value.length == 0 ? userAddressInfo.AddressList[0].city :
				selectAddressData.value[0].city,
			"address": selectAddressData.value.length == 0 ? userAddressInfo.AddressList[0].address :
				selectAddressData.value[0].address,
		})
		uni.navigateTo({
			url: '/component/submitOrders/submitOrders?submitData=' + JSON.stringify(values)
		})

	}
	const buttonClickGoodsNav = (e) => {
		//加入购物车
		if (e.index == 0) {
			if (useUserInfo.userInfo.id) {
				const id = parseInt(goodsId.value);
				let index = userCart.shoppingcartList.findIndex(item => item.goodsId === id);
				let currentQuantity = userCart.shoppingcartList[index]?.quantity;
				if (currentQuantity != undefined) {
					if (goodsNum.value > currentQuantity) {
						post("/cart/add", {
							userId: useUserInfo.userInfo.id,
							goodsId: goodData.value[0].goodsId,
							quantity: 1,
						}, uni.getStorageSync("token")).then(res => {
							uni.showToast({
								title: '加入购物车成功',
								icon: 'none'
							})
							userCart.loadShoppingcartList()
							cartNum.value++
						})
					} else {
						uni.showToast({
							title: "商品库存不足",
							icon: 'none'
						})
					}

				} else if (goodsNum.value == 0) {
					uni.showToast({
						title: "商品库存不足",
						icon: 'none'
					})
				} else {
					post("/cart/add", {
						userId: useUserInfo.userInfo.id,
						goodsId: goodData.value[0].goodsId,
						quantity: 1,
					}, uni.getStorageSync("token")).then(res => {
						uni.showToast({
							title: '加入购物车成功',
							icon: 'none'
						})
						userCart.loadShoppingcartList()
						cartNum.value++
					})
				}

			} else {
				uni.navigateTo({
					url: '/component/login/login'
				})
			}
		} else { //立即购买
			if (useUserInfo.userInfo.id) {
				show.value = true;
			} else {
				uni.navigateTo({
					url: '/component/login/login'
				})
			}
		}

	}
	//加载商品评论
	const wxUserComment = ref([])
	const webUserComment = ref([])
	const loadComment = () => {
		get("/comment/goods/" + goodsId.value, uni.getStorageSync("token")).then(res => {
			if (res.data.data != null) {
				goodsCommentData.value = res.data.data
				goodsCommentData.value.forEach(comment => {
					comment.create_time = comment.create_time.replace("T", " ")
				})
				wxUserComment.value = goodsCommentData.value.filter(item=>item.nick_name && item.avatar_url);
				webUserComment.value = goodsCommentData.value.filter(item => !item.nick_name || !item.avatar_url);
			}

		})
	}
	onShow(() => {
		cartNum.value = userCart.getShoppingcartQuantity()
	})
	onLoad((e) => {
		goodsId.value = e.goodsId
		loadGoods()
		loadComment()
	})
</script>

<style scoped lang="scss">
	.detail-box {
		image {
			height: 701rpx;
			width: 750rpx;
		}

		.goods-info {
			background-color: #F5F5F5;
			padding: 10px;
			height: 80vh;

			.content {
				margin-bottom: 10px;
				background-color: #fff;
				border-radius: 10px;
				padding: 10px;

				.content-head {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.goods-name {
						font-size: 18px;
						font-weight: bold;
						color: black;
					}

					.goods-num {
						font-size: 14px;
					}
				}

				.goods-price {
					font-size: 18px;
					color: #FF6600;
					margin-top: 6px;
					font-weight: bold;
				}

				.goods-intro {
					font-size: 12px;
					color: #646566;
					margin: 5px 0;
				}
			}

			.goods-comment {
				margin-bottom: 5px;
				background-color: #fff;
				border-radius: 10px;
				padding: 10px;

				.comment-content {
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 30px;
						height: 30px;
						margin-right: 3px;
					}

					.nameRate {
						flex: 1;

						.nickName {
							color: black;
						}
					}

					.comment-time {
						color: #c9c9c9;
						font-size: 12px;
					}
				}
			}
		}

		//底部导航
		.goods-carts {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
		}

		//弹出层
		.pop-content {
			height: 30vh;
			padding: 10px;

			.content-goods {
				display: flex;
				align-items: center;

				image {
					width: 80px;
					height: 80px;
					margin-right: 10px;
				}

				.content-goods-info {
					.info-name {
						color: black;
						margin-bottom: 5px;
					}

					.info-price {
						margin-top: 5px;
						color: #ff6700;
					}
				}
			}

			.content-address {
				margin-top: 20px;

				.address {
					height: 20px;
					margin-top: 5px;
					background-color: #f8f8f8;
					font-size: 14px;
					line-height: 20px;
					padding-left: 5px;
					border-radius: 5px;
					display: flex;
					align-items: center;

					.address-info {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 330px;
					}
				}
			}

			.content-quantity {
				display: flex;
				justify-content: space-between;
				margin-top: 30px;
			}

			.confirm {
				margin-top: 20px;
				height: 30px;
				line-height: 30px;
				background-color: #ff6700;
				border-radius: 20px;
				text-align: center;
				color: white;
				width: 100%;
			}
		}
	}
</style>